<!--
 * @Author: your name
 * @Date: 2020-12-22 15:06:18
 * @LastEditTime: 2021-09-08 23:29:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jijian改\pages\pc\home\components\AboutWe\index.vue
-->
<template>
  <!-- 关于华融 -->
  <div class="about-we">
    <div class="back">
      <!-- <img src="@/static/pc/index/about-back-left.jpg" /> -->
      <div class="text">
        <p class="title">
          <span>关于华融</span>
          <span>ABOUT US</span>
        </p>
        <p class="text-detail-top">
          惠州市华融基建工程管理有限公司（简称“华融基建”），注册资1000万元。主要以工程管理服务；建筑室内外装饰工程设计及施工；市政工程；建筑材料；开发地产项目的基础设施环保建设工程为主。
          <br />
          严格进行质量管理，及时引进先进设备及加强管理，加大投入，稳步发展，不断迈向全国，致力于为公众提供可靠、深受信赖的产品和服务。
        </p>

        <p class="text-detail">
          公司视信誉为根本，以质量求生存，以效益求发展。
          公司将致力于建设工程事业，积极参与工程项目建设不断提高公司的市场竞争实力
          创造更好的经济效益和社会效益，为建设工程行业作出贡献。
        </p>
      </div>
    </div>
    <ul>
      <!-- <li v-for="(item, index) in aboutWeList" :key="index">
        <nuxt-link :to="aboutPath[index]">
          <img
            :src="currentIndex == index ? item.img : item.clickImg"
            @mouseover="changeImg(index)"
            @mouseleave="leaveImg"
          />
          <p
            :style="{
              color: currentIndex == index ? '#F58046' : '#666666',
            }"
          >
            {{ item.text }}
          </p>
        </nuxt-link>
      </li> -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aboutWeList: [
        /*  {
          img: require('@/static/pc/index/about05.png'),
          clickImg: require('@/static/pc/index/about06.png'),
          text: '公司简介',
        },
        {
          img: require('@/static/pc/index/about01.png'),
          clickImg: require('@/static/pc/index/about02.png'),
          text: '组织架构',
        },
        {
          img: require('@/static/pc/index/about03.png'),
          clickImg: require('@/static/pc/index/about04.png'),
          text: '经营理念',
        },

        {
          img: require('@/static/pc/index/about07.png'),
          clickImg: require('@/static/pc/index/about08.png'),
          text: '目标宗旨',
        }, */
      ],
      currentIndex: -1,
      aboutPath: [
        {
          path: '/about-detail',
          query: { currentIndex: 0 },
        },
        {
          path: '/about-detail',
          query: { currentIndex: 1 },
        },
        {
          path: '/about-detail',
          query: { currentIndex: 2 },
        },
        { path: '/about-detail', query: { currentIndex: 3 } },
      ],
    }
  },
  methods: {
    changeImg(index) {
      this.currentIndex = index
    },
    leaveImg() {
      this.currentIndex = -1
    },
  },
}
</script>

<style lang="scss" scoped>
.about-we {
  overflow: hidden;
  position: relative;
  height: 800px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  .back {
    height: 648px;
    width: 1420px; //74.27%; //1426px
    // background: url('~@/static/pc/index/about-back.png') no-repeat;
    display: flex;
    justify-content: center;
    img {
      height: 640px;
    }
    .text {
      width: 550px;
      color: #666666;
      letter-spacing: 1px;
      margin-left: 190px;
      .title {
        span {
          font-family: Microsoft YaHei;
          font-weight: bold;
          &:first-child {
            position: relative;
            font-size: 3rem;
            &::after {
              position: absolute;
              bottom: -4px;
              left: -276px;
              content: '';
              height: 3px;
              width: 469px;
              background-color: #f58046;
            }
            color: #f58046;
          }
          &:last-child {
            font-size: 2rem;
            color: #b6b6b6;
            margin-left: 80px;
          }
        }
      }
      .text-detail-top {
        line-height: 30px;
        margin-top: 30px;
        color: #848484;
      }
      .text-detail {
        line-height: 30px;
        margin-top: 30px;
      }
    }
  }
  ul {
    position: absolute;
    bottom: 10%;
    left: 55%;
    width: 500px;
    height: 80px;
    // background-color: antiquewhite;
    display: flex;
    justify-content: space-between;
    li {
      cursor: pointer;
      width: 57px;
      height: 100%;
      img {
        width: 57px;
        height: 56px;
      }
      p {
        text-align: center;
        letter-spacing: 2px;
        font-size: 12px;
        color: #666666;
      }
    }
  }
}
</style>
